<template>
    <ul id="list">
        <li v-for="(item, index) in listData" :key="index" @click="toArticle(item)">
            <div class="imgBox">
                <img :src="item.img" alt="博客图片" @error="defaultImg()">
            </div>
            <div class="msg" ref="information">
                <h3>{{ item.theme }}</h3>
                <p class="introduce" v-show="introduction">{{ item.introduction }}</p>
            </div>
            <p class="pushTime" v-show="introduction"><span style="margin-right: 10px;"></span>{{
                item.initialTime.slice(0, 10) }}</p>
            <p class="popularity" v-show="introduction"><span style="margin-right: 10px;"></span>{{ item.popularity }}
            </p>
        </li>
    </ul>
</template>

<script>
export default {
    // 接收文章列表
    props: ['listData'],
    data() {
        return {
            // 灯光
            light: false,
            // 控制人气和时间显示
            introduction: true
        }
    },
    methods: {
        toArticle(item) {
            // 触发开关灯同步事件
            this.$bus.$emit('lightSynchronous', 'MoreListBar')
            // 打开新页面 并传递参数给文章内容页面，告诉是哪个文章
            let routeUrl = this.$router.resolve({
                path: '/article',
                query: {
                    id: item.id,
                    theme: item.theme,
                    introduction: item.introduction,
                    light: this.light // 转递开关灯状态
                }
            })
            window.open(routeUrl.href, '_blank')
        },
        // 提供回调函数给App组件，同步light变量状态
        moreListBarLightSynchronous(appLight) {
            this.light = appLight
        },
        // 返回默认的图片
        defaultImg() {
            if (event.type == 'error') {
                event.target.src = 'https://bokey.oss-cn-shenzhen.aliyuncs.com/img/staticImage/notPicture.png'
            }
        },
        // 介绍不显示，标题最大化
        introductionUnShow() {
            this.introduction = false
            this.$refs.information.forEach(element => {
                element.style.width = 'auto'
            })
        },
        // 介绍显示，标题恢复
        introductionShow() {
            this.introduction = true
            this.$refs.information.forEach(element => {
                element.style.width = '70%'
            })
        }
    },
    mounted() {
        // 绑定事件总线同步灯光
        this.$bus.$on('moreListBarLightSynchronous', this.moreListBarLightSynchronous)
        // 绑定事件总线人气和事件显示/不显示
        this.$bus.$on('introductionShow', this.introductionShow)
        this.$bus.$on('introductionUnShow', this.introductionUnShow)
    },
    beforeDestroy() {
        // 消除事件总线绑定
        this.$bus.$off('moreListBarLightSynchronous')
        this.$bus.$off('introductionShow')
        this.$bus.$off('introductionUnShow')
    },
}
</script>

<style lang="scss" scoped>
#list {
    width: 100%;
    margin: 30px 0px 30px 30px;
    border-bottom: 0.5px solid $color-text;
}

#list li {
    position: relative;
    width: 95%;
    overflow: hidden;
    border-top: 0.5px solid $color-text;
    display: grid;
    grid-template-columns: 1fr 3fr 0fr 0fr;
    grid-gap: 10px;
    cursor: pointer;
}

#list li:hover img {
    transform: scale(1.2);
}

.imgBox {
    height: 200px;
    width: 200px;
    margin: 10% auto;
    border-radius: 10px;
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.msg {
    position: relative;
    width: 100%;
    max-height: 200px;
    display: grid;
    grid-template-rows: 1.5fr 2.5fr .5fr;
    overflow: hidden;
}

h3 {
    color: $color-main-text;
    font-size: $font-size-large;
    font-weight: $font-weight-large;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

p {
    color: $color-text;
    font-size: $font-size-medium;
    font-weight: $font-weight-small;
}

.introduce {
    width: 90%;
    display: inline-block;
    // 设置文本换行显示
    word-wrap: break-word;
    word-break: break-all;
    // 设置文本行数为3行，内容超出显示省略号
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.pushTime,
.popularity {
    position: absolute;
    font-size: $font-size-small;
}

.pushTime {
    top: 20px;
    right: 0;
}

.popularity {
    bottom: 20px;
    right: 0;
}
</style>